<template>
	<view>
		<view class=""
			style="width: 630rpx;padding: 20rpx 30rpx;background-color: #FFFFFF;margin: 0 auto;border-radius: 15rpx;margin-top: 100rpx;">
			<view class="row" style="align-items: center;padding-bottom: 30rpx;border-bottom: solid 1rpx #eee;">
				<zywork-icon type="icon-qianbaoqiandaiyue" size="40" color="#4E99C1"></zywork-icon>
				<text style="color: #4E99C1;margin-left: 30rpx;">分享二维码邀请好友获奖励</text>
			</view>
			<view class="column" style="align-items: center;justify-content: center;">
				<view class="" style="padding: 60rpx 0rpx;">
					<text>长按分享保存二维码</text>
					<view class="row align-items-center" @click="paste" style="margin-top: 20rpx;">
						<text v-if="userInfo.rcode" >复制邀请码:</text>
						<text v-if="userInfo.rcode" :selectable="true">{{userInfo.rcode}}</text>
					</view>
				</view>
				
				<canvas @longpress="logoTime" id="qrcode" canvas-id="qrcode" :style="`width: ${extentRpx}rpx;height: ${extentRpx}rpx;`" />
			</view>
			<view class="row" @click="navTo"
				style="align-items: center;border-top: solid 1rpx #eee;margin-top: 50rpx;padding: 30rpx 0rpx;padding-bottom: 20rpx;">
				<zywork-icon type="icon-qianbaoqiandaiyue" size="40" color="#4E99C1"></zywork-icon>
				<text style="margin-left: 30rpx;">我的推荐</text>
				<zywork-icon style="margin-left: auto;" type="icon-youjiantou" size="40" color="#bababa"></zywork-icon>
			</view>
		</view>
		<uni-popup ref="share" background-color="#fff" type="share"><uni-popup-share @select="select"></uni-popup-share></uni-popup>
	</view>
</template>

<script>
	import uQRCode from '@/components/uqrcode/common/uqrcode.js'
	export default {
		data() {
			return {
				extentRpx: 600,
				qrcodeSrc:"",
				// BASE_URL:"https://yunzhuan.zgwlkj.cn/yunzhuan",
				BASE_URL:"http://yunzhuan.zgwlkj.cn/ceshiyunzhuan",
				userInfo:{},
				
			};
		},
		onUnload() {
			console.log("卸载页面，返回上一页")
			uni.hideLoading()
		},
		onReady() {
			
		},
		onLoad(data) {
			
		},
		created() {
			let pxSize = uni.upx2px(this.extentRpx);
			this.userInfo = this.$api.prePage().userInfo;
			setTimeout(()=>{
				console.log('邀请码',this.userInfo.rcode)
				if(uni.getStorageSync(this.$util.APP_VERSION)){
					let url = uni.getStorageSync(this.$util.APP_VERSION);
					this.BASE_URL = url.webUrl
				}
				if(!this.qrcodeSrc){
					uni.showLoading({
						title:"加载邀请码.."
					})
					uQRCode.make({
						canvasId: 'qrcode',
						componentInstance: this,
						size: pxSize,
						margin: 10,
						text: this.BASE_URL+'?rcode='+this.userInfo.rcode,
						backgroundColor: '#ffffff',
						foregroundColor: '#000000',
						fileType: 'png',
						errorCorrectLevel: uQRCode.errorCorrectLevel.H
					})
					.then(res => {
						uni.hideLoading()
						this.qrcodeSrc = res.tempFilePath
					})
				}
			},500)
		},
		onShow() {
			
		},
		methods:{
			paste(){
				 uni.setClipboardData({ data: this.userInfo.rcode });
			},
			//选择分享到哪里
			select(e){
				if(e.index==0){
					this.$refs.share.close('share')
					this.weixin();
				}
			},
			weixin() {
				console.log("分享")
				let that = this;
				if(!that.imgsrc){
					uni.saveImageToPhotosAlbum({
						filePath: that.qrcodeSrc,
						success: function(res1) {
							console.log(res1)
							uni.showToast({
								title: '保存相册成功'
							})
							that.imgsrc = res1.tempFilePath
							uni.share({
								provider: "weixin",
								scene: "WXSceneSession",
								type: 2,
								imageUrl: that.qrcodeSrc,
								success: function(res) {
									console.log(JSON.stringify(res));
								},
								fail: function(err) {
									console.log(JSON.stringify(err));
								}
							});
						},
						fail(res) {
							if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
								uni.showModal({
									title: '您需要授权相册权限',
									success(res) {
										if (res.confirm) {
											uni.openSetting({
												success(res) {
										
												},
												fail(res) {
													console.log(res)
												}
											})
										}
									}
								})
							}
						}
					});
				}else {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						title: "来自好友的分享",
						summary: "我正在使用云赚，邀你一起来看赚钱！复制到浏览器立马一起来赚钱", // 描述
						imageUrl: that.imgsrc,
						success: function(res) {
							console.log(JSON.stringify(res));
						},
						fail: function(err) {
							console.log(JSON.stringify(err));
						}
					});
				}
				
			},
			logoTime(){
				console.log("长按分享")
				uni.showActionSheet({
					itemList: ['分享', '保存'],
					success:res=> {
						if (res.tapIndex == 0) {
							this.$refs.share.open()
						}else if(res.tapIndex == 1) {
							this.save();
						}
					}
				})
			},
			save() {
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: 'H5长按image保存'
				})
				return
				// #endif
				uni.saveImageToPhotosAlbum({
					filePath: this.qrcodeSrc,
					success: (res) => {
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						})
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: JSON.stringify(err)
						})
					}
				})
			},
			navTo(){
				uni.navigateTo({
					url:"detail"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #2EA4FB;
		width: 100%;
		height: 800rpx;
	}
</style>
